<template>
  <div class="bar" ref="lineRef"></div>
</template>
<script setup>
import { ref, watch } from "vue";
import useChart from "@/hooks/useCharts";

let props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

let baseOption = {
  legend: {
    show: false,
    right: "0%",
    top: "0%",
    textStyle: {
      color: "#fff",
      fontSize: 10,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "15%",
    left: "0%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    name: "时间",
    nameTextStyle: {
      padding: [0, 0, 0, -30],
    },
    type: "category",
    data: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
    axisTick: {
      alignWithLabel: true,
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "数量",
    nameTextStyle: {
      padding: [0, -50, -10, -20],
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "产量",
      data: [10, 16, 12, 13, 8, 9, 12, 14, 16, 13, 14, 16],
      type: "bar",
      color: "rgb(78,238,161)",
      label: {
        show: true, //开启显示
        position: "top", //在上方显示
        color: "#fff",
      },
    },
  ],
};

const lineRef = ref(null);
const { updateDraw } = useChart(lineRef, baseOption);

watch(
  () => props.data,
  (val) => {
    updateDraw({
      xAxis: {
        data: val.xdata,
      },
      series: [
        {
          data: val.sdata,
        },
      ],
    });
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
.bar {
  width: 100%;
  height: 100%;
}
</style>
